<template>
  <div>
    <def-layout type="col0-24" :page="page" @invoke="invoke">
      <div slot="search" class="form-items">
        <el-form-item>
          <el-input v-model="formSearch.keyword" placeholder="车牌" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.drivingName" placeholder="驾驶员" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.subscribeName" placeholder="预定人" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.subscribePhone" placeholder="预定人手机号" />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.subscribeTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="预定开始日期"
            end-placeholder="预定结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <AddressSelect
            v-model="formSearch.areaIds"
            :area="formSearch.endArea"
            :placeholder="'请选择目的地'"
            @set-area="setArea"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.used" placeholder="请选择状态">
            <el-option
              v-for="item in constants.BackCarType.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div slot="content" class="grid">
        <page-grid v-if="self!=null" :parent="self">
          <div slot="columns">
            <el-table-column prop="BackCarType" align="center" label="状态" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.used" type="BackCarType" @click="filter" />
              </template>
            </el-table-column>
            <el-table-column prop="drivingName" align="center" label="驾驶员" width="100" />
            <el-table-column prop="drivingPhone" align="center" label="手机号码" width="100" />
            <el-table-column prop="carNo" align="center" label="车牌" width="100" />
            <el-table-column prop="startArea" align="center" label="发车地" width="150" />
            <el-table-column prop="endArea" align="center" label="目的地" width="150" />
            <el-table-column prop="subscribeName" align="center" label="预订人" width="150" />
            <el-table-column prop="subscribePhone" align="center" label="预订人手机号码" width="150" />
            <el-table-column prop="subscribeTime" align="center" label="预订时间" width="150" />
            <el-table-column prop="createTime" sortable align="center" label="创建时间" width="150" />
            <el-table-column prop="expireTime" sortable align="center" label="过期时间" width="150" />
          </div>
        </page-grid>
      </div>
    </def-layout>
    <!-- 组件 -->
    <Reason ref="reason" @verifyQuery="verifyFailQuery" />
  </div>
</template>
<script>
import adminSupport from 'lola-admin-support-el'
import AddressSelect from '@/components/AddressSelect'
import Reason from './verify'
export default {
  name: 'BackCar',
  components: { AddressSelect, Reason },
  mixins: [adminSupport.mixins.index],
  data() {
    return {
      name: 'BackCar',
      formSearch: { keyword: '', used: '', createTime: [] },
      self: null,
      paramsType: null
    }
  },
  created() {
    const that = this
    const type = that.$route.params.type
    this.paramsType = type
    console.log('回头车路由参数type = ' + type)
    this.init()// 页面自定义初始化
  },
  methods: {
    init() {
      var that = this
      that.loadData()// 加载数据(按钮+列表) 扩展需重写该方法
      that.self = that
      if (that.paramsStatus != null && that.paramsStatus !== undefined && that.paramsStatus !== ':type') {
        that.formSearch.used = that.paramsType
        that.search()
      }
    },
    search() {
      console.log(this.formSearch.subscribeTime)
      const queryList = []
      if (!String.isNullOrEmpty(this.formSearch.keyword)) queryList.push({ 'key': 'o.carNo', 'value': this.formSearch.keyword, 'oper': ':', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.drivingName)) queryList.push({ 'key': 'o.drivingName', 'value': this.formSearch.drivingName, 'oper': ':', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.subscribeName)) queryList.push({ 'key': 'o.subscribeName', 'value': this.formSearch.subscribeName, 'oper': ':', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.subscribePhone)) queryList.push({ 'key': 'subscribePhone', 'value': this.formSearch.subscribePhone, 'oper': ':', 'join': 'or' })
      if (!String.isNullOrEmpty(this.formSearch.used) && this.formSearch.used !== 'All') queryList.push({ 'key': 'used', 'value': this.formSearch.used, 'oper': '=', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.endArea)) queryList.push({ 'key': 'o.endArea', 'value': this.formSearch.endArea, 'oper': '=', 'join': 'and' })
      if (this.formSearch.subscribeTime !== null && this.formSearch.subscribeTime !== undefined && this.formSearch.subscribeTime.length > 0) {
        queryList.push({ 'key': 'o.subscribeTime', 'value': this.formSearch.subscribeTime[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.subscribeTime', 'value': this.formSearch.subscribeTime[1], 'oper': '<=', 'join': 'and' })
      }
      this.dataGrid.params.queryList = queryList
      this.refresh()
    },
    bindSearch() {
      this.formSearch = { keyword: '', used: '', createTime: [], endArea: '' }
    },
    setArea(val) {
      console.log(val)
      this.formSearch.endArea = val
    },
    // 重写按钮方法
    buildOtherBtn(item, btn) {
      console.log('========重写按钮方法')
      console.log(item)
      switch (item.code) {
        case 'm5171':
          btn.type = ''
          break
        case 'm5172':
          btn.type = 'warning'
          btn.opt = 'roleverify'
          break
      }
    },
    // 主管审核
    roleverify(row) {
      const that = this
      if (row.used !== 'C') {
        this.$message({
          message: '当前回头车未在预约审核中状态',
          type: 'warning'
        })
      } else {
        that.$confirm(
          '请确认是否通过【' + row.subscribeName + '】预定回头车',
          '系统提示',
          {
            confirmButtonText: '通过',
            cancelButtonText: '不通过',
            type: 'warning',
            distinguishCancelAndClose: true
          }
        )
          .then(() => {
            const url = that.service.conf.api.get('wms').url + '/api/logistics/car-subscribe/audio'
            that.service.post(url, { isPass: true, id: row.id })
              .then(function(rsp) {
                if (rsp.code !== 200) {
                  that.$message.error(rsp.message)
                  return
                }
                that.$message.success('操作成功!')
                that.search()
              })
              .catch(function(err) {
                that.$message.error('服务端异常')
                console.log(err)
              })
          })
          .catch((res) => {
            console.log(res)
            if (res === 'cancel') {
              that.$refs['reason'].show(row)
            }
          })
      }
    },
    verifyFailQuery() {
      this.search()
    }
  }
}
</script>
